<template>
	<div id="left">
		<template v-for="item,index in nav">
			<div class="menu_div" v-if="item.showNav">
				<!-- 只有一级菜单 -->
				<div v-if="item.type==1" :id="item.id" @click="showPage(item,index)"
					 class="menu_one menu_one_only">
					<div class="icon_left" :style="{backgroundImage : 'url('+item.icon+')'}"></div>
					<div>{{item.name}}</div>
				
				</div>
				
				<template v-else>
					<!-- 一级菜单 -->
					<div class="menu_one" @click="showSubMenu($event)" :id="item.id">
						<div class="icon_left" :style="{backgroundImage : 'url('+item.icon+')'}"></div>
						<div>{{item.name}}</div>
						<div class="icon_right"></div>
					</div>
					<div class="submenu" hidden>
						<!-- 二级菜单 -->
						<template v-for="item2 in item.second">
							<div v-if="item2.showNav" :id="item2.id" @click="showPage(item2,index)" class="menu_two">
								{{item2.name}}
							</div>
						</template>
					</div>
				</template>
			</div>
		</template>
		
		<div v-for="item,index in nav" :data-id="item.id" :data-show="item.showNav+''" :data-index="index" data-level="one">
			<div v-for="item2 in item.second" :data-id="item2.id" :data-show="item2.showNav+''" :data-index="index" data-level="two">
				<div v-for="item3 in item2.third" :data-id="item3.id" :data-show="item3.showNav+''" :data-index="index" data-level="three"></div>
			</div>
		</div>
		
	</div>
</template>

<script>
import {mapState} from 'vuex'; 
var vm;
export default {
	data : function() {
		return {
			// nav : this.$store.state.nav,
		}
	},
	computed: {
		...mapState({	
			nav:state=>state.nav
		}),
	},
	methods : {
		//显示二级菜单
		showSubMenu : function(event) {
			var $menuOne = $(event.currentTarget);
			//获取二级菜单div和图标div的元素对象
			var $subMenu = $menuOne.next();
			var $icon = $menuOne.find(".icon_right");
			
			if($subMenu.css('display')=="none") {
				//找到当前展开的菜单
				let $activeIcon = $(".icon_right_active");
				let $activeSubMenu = $activeIcon.parent().next();
				//收起,移除下图标
				$activeSubMenu.slideUp();
				$activeIcon.removeClass("icon_right_active");
				
				//没显示,则下滑显示,图标改为向下
				$subMenu.slideDown();
				$icon.addClass("icon_right_active");
			} else {
				$subMenu.slideUp();
				$icon.removeClass("icon_right_active");
			}
		},
		showPage : function(obj,index) {
			//如果二级菜单是目录,不是页面
			if(obj.type==0) {
				//三级菜单为空
				if(obj.third.length==0) {
					tool.message("该菜单没有配置页面");
					return;
				}
				
				//需求说,非要改成每次打开三级菜单，都要打开第一项，而不是上次的菜单
				for(var i=0; i<obj.third.length; i++) {
					obj.third[i].active = false;
				}
				obj.third[0].active = true;
				// --- 临时  ---
				
				for(var i=0; i<obj.third.length; i++) {
					//找到三级菜单被选中的项(默认第一项)
					if(obj.third[i].active) {
						//跳转过去,并重设顶部导航栏
						router.push(obj.third[i].path);
//						vm.$store.commit("setTopNav",obj.third);
						break;
					}
				}
			}
			//如果是页面,直接跳转
			if(obj.type==1) {
				router.push(obj.path);
//			    vm.$store.commit("setTopNav",[]);
			}
			
			//添加选中样式
//			$(".menu_active").removeClass("menu_active");
//			$("#"+obj.id).addClass("menu_active");
			
			//index是一级菜单选中的序号
//			for(var i=0; i<vm.nav.length; i++) {
//				var n = vm.nav[i];
//				//选中的序号,设为选中图标。否则为默认图标
//				n.icon = (i==index? n.icon_active : n.icon_default);
//			}
			
		},
		setMenu : function() {
			//获取页面id,换转成可以显示的页面id
			var id = this.$route.meta.id;
			id = vm.getShowId(id);
			//根据菜单id获取辅助模块的元素
		  	var $div = $("[data-id='"+id+"']");
		  	
		  	//获取所属一级菜单序号
		  	var index = $div.attr("data-index");
		  	//设置一级菜单图标
			for(var i=0; i<vm.nav.length; i++) {
				var n = vm.nav[i];
				//选中的序号,设为选中图标。否则为默认图标
				n.icon = (i==index? n.icon_active : n.icon_default);
			}
			
			//获取菜单层级，
		  	var level = $div.attr("data-level");
		  	
		  	//选中的菜单对象和菜单id
		  	var $menu;
		  	var menuId = id;
		  	
		  	//如果是第三级
		  	if(level == "three") {
		  		//获取第二级菜单的id
		  		menuId = $div.parent().attr("data-id");
		  		vm.nav.forEach(function(one){
		  			one.second.forEach(function(two){
		  				//遍历第二级,找到第二级菜单的对象
		  				if(two.id == menuId) {
		  					two.third.forEach(function(three){
		  						//遍历第三级菜单,设置当前选中状态的对象
		  						three.active = (three.id == id? true : false);
		  					})
		  					//保存第三级菜单对象到状态管理
		  					vm.$store.commit("setTopNav",two.third);
		  					return false;
		  				}
		  			})
		  		})
		  	//不是第三级
		  	} else {
		  		vm.$store.commit("setTopNav",[]);
		  	}
		  	
		  	//获取左侧菜单对象
		  	$menu = $("#"+menuId);
		  	
		  	//找到当前展开的菜单
			let $activeIcon = $(".icon_right_active");
			let $activeSubMenu = $activeIcon.parent().next();
			//收起,移除下图标
			$activeIcon.removeClass("icon_right_active");
			
		  	//如果不是第一级
		  	if(level!="one") {
		  		let $menuDiv = $menu.parent();
		  		//收起当前展开的
		  		if(!$activeSubMenu.is($menuDiv)) {
		  			$activeSubMenu.hide();
		  		}
		  		//则需要展开第一级菜单
		  		$menuDiv.show();
		  		$menuDiv.prev().find(".icon_right").addClass("icon_right_active");
		  	} else {
		  		$activeSubMenu.slideUp();
		  	}
		  	
		  	//将菜单设为选中样式
		  	$(".menu_active").removeClass("menu_active");
		  	$menu.addClass("menu_active");
		},
		getShowId : function(id) {
			var $div = $("[data-id='"+id+"']");
			var show = $div.attr("data-show");
			while(show=="false") {
				//已经是第一个，不能往前遍历
				if($div.prev().length==0) {
					break;
				}
				//往前遍历
				$div = $div.prev();
				show = $div.attr("data-show");
			}
			
			return $div.attr("data-id");
		}
	},
	watch:{
	  	$route(to,from){ //监听路由变化
	    	vm.setMenu();
	  	}
	},
	mounted : function() {
		vm.setMenu();
	},
	created : function() {
		vm = this;
	}
}
</script>

<style scoped>
	#left {
		padding: 0.3rem 0;
	}
	.menu_div {
		
	}
	.menu_one {
		height: 0.58rem;
		line-height: 0.58rem;
		color: #333333;
		font-size: 0.18rem;
		/*padding-left: 0.8rem;*/
		border-left: 0.07rem solid #f5feff;
		cursor: pointer;
		user-select: none;
	}
	.menu_one>div {
		float: left;
	}
	.menu_one_only:hover,.menu_two:hover {
		border-left: 0.07rem solid #3885f8;
		background-color: #e0f6ff;
		/*color: #3885f8;*/
	}
	.menu_two {
		/*outline: 1px solid red;*/
		height: 0.58rem;
		line-height: 0.58rem;
		padding-left: 0.75rem;
		color: #666666;
		font-size: 0.16rem;
		border-left: 0.07rem solid #f5feff;
		cursor: pointer;
		user-select: none;
	}
	/*.menu_two*/
	/*.submenu {
		
	}*/
	.menu_two:last-child {
		border-bottom: 0.01rem solid #e6f2f2;
	}
	.menu_active {
		border-left: 0.07rem solid #3885f8;
		background-color: #e0f6ff;
		color: #3885f8;
	}
	.icon_left {
		width: 0.22rem;
		height: 0.22rem;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		margin: 0.18rem 0.2rem 0 0.25rem;
	}
	.icon_right {
		width: 0.2rem;
		height: 0.2rem;
		margin-left: 0.15rem;
		margin-top: 0.21rem;
		background-image: url(../../assets/img/common/left_arrow_right.png);
		background-size: 0.2rem;
		background-repeat: no-repeat;
		/*background-position: center;*/
	}
	.icon_right_active {
		background-image: url(../../assets/img/common/left_arrow_down.png) !important;
	}
</style>